<template>
	<view>
		<view class="button"  @click="getEveryDayText()">
			<text :class="'bg-'+themeColor.name">换一篇</text>
		</view>
		<view class="title">
			{{getEveryDayText_con.title}}		
		</view>
	
		<view class="author">
			{{getEveryDayText_con.author}}
		</view>
		<view class="content">
			<u-parse :html="getEveryDayText_con.content" :selectable="true" :tag-style="style"></u-parse>
		</view>
		
		
		
	</view>
</template>

<script>

	export default {
		data() {
			return {	
				getEveryDayText_con:"",
				style: {
					// 字符串的形式
					p: 'text-indent: 2em;line-height: 48rpx; font-size:30rpx;',
				}
			};
		},
		onLoad() {
			this.getEveryDayText()
	
		},
		methods:{
			getEveryDayText(){
				let that = this
				this.$api.getEveryDayText().then((res)=>{
					let datas = res.data
					if(datas.code == 0){
						that.getEveryDayText_con = datas.data
					}
				})
			},
	
			// https://v2.jinrishici.com/one.json
		}		
	}
</script>

<style lang="less" scoped>
	.title{
		font-size: 42rpx;
		font-weight: bold;
		width: 100%;
		text-align: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.author{
		font-size: 34rpx;
		width: 100%;
		text-align: right;
		color: #999999;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.content{
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.button{
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.button text{
		border-radius: 20rpx;
		height: 70rpx;
		line-height:  70rpx;
		width: 100%;
		display: block;
		text-align: center;
		color: #FFFFFF;
	}
</style>
